<template>
	
		<view class="index-list animated fadeInLeft fast">
			<view class="index-list1 u-f-ac">
				<view class="u-f-ajc">
					<image :src="item.userpic" mode="widthFix" lazy-load></image>
					{{ item.username }}
				</view>

				<view class="u-f-ajc" v-if ="!isguanzhu" @tap="guanzhu">
					<view class="icon iconfont icon-zengjia"></view>
					关注
				</view>
				<view class="u-f-ajc" v-else @tap="qxguanzhu">
					
					已关注
				</view>
			</view>
			<view class="index-list2" @tap="opendetail">{{ item.title }}</view>
			<view class="index-list3 u-f-ajc" @tap="opendetail">
				<!-- 图片 -->
				<image :src="item.titlepic" mode="widthFix" lazy-load ></image>
				<!-- 视频 -->
				<view v-if="item.type === 'video'">
					<view class="icon iconfont icon-bofang index-list-play"></view>
					<view class="index-list-playinfo">{{ item.playnum }}次播放 {{ item.long }}</view>
				</view>
			</view>

			<view class="index-list4 u-f-ac">
				<view class="index-list4-ico u-f-ac">
					<view class="u-f-ac" :class="{'active':(infonum.index == 1)}" @tap="caozuo(ding)">
						<view class="icon iconfont icon-icon_xiaolian-mian"></view>
						{{ infonum.dingnum }}
					</view>

					<view class="u-f-ac" :class="{'active':(infonum.index == 2)}" @tap="caozuo(cai)">
						<view class="icon iconfont icon-kulian"></view>
						{{ infonum.cainum }}
					</view>
				</view>
				<view class="index-list4-ico u-f-ac">
					<view class="icon iconfont icon-pinglun1"></view>
					{{ item.commentunm }}
					<view class="icon iconfont icon-zhuanfa"></view>
					{{ item.sharnum }}
				</view>
			</view>
		</view>
	
</template>

<script>
	
export default {
	props: {
		item: Object,
		index: Number
	},
	data(){
		return {
			isguanzhu:this.item.isguanzhu,
			infonum:this.item.infonum,
			// ding:ding,
			// cai:cai
		}
	},
	methods:{
		// 关注
		guanzhu(){
			this.isguanzhu = false;
			uni.showToast({
				title:'关注成功'
			})
		},
		qxguanzhu(){
			this.item.isguanzhu = true;
			uni.showToast({
				title:'取消关注'
			})
		},
		 //顶踩
		 caozuo(type){
			 // console.log(1);
			 switch(type){
				 case "ding":
				 if(this.infonum.index == 1){
					 return;
				 }
				 this.infonum.dingnum++;
				 if(this.infonum.index == 2){
				 this.infonum.dingnum--; 
				 }
				 this.infonum.index = 1;
					break;
					
					
				 case "cai":
				 if(this.infonum.index == 2){
					return;
				 }
				 this.infonum.cainum++;
				 if(this.infonum.index == 1){
				 this.infonum.cainum; 
				 }
				 this.infonum.index = 2;
					break;
			 }
		 },
		 // 进入详情页
		 			opendetail(){
		 				console.log("进入详情页")
		 			}
		
	}
};
</script>

<style scoped>
.index-list {
	padding: 20upx;
	border-bottom: 1upx solid #eeeeee;
}
.index-list1 {
	justify-content: space-between;
}
.index-list1 > view:first-child {
	color: #989898;
	line-height: 90upx;
}
.index-list1 > view:first-child > image {
	width: 90upx;
	height: 90upx;
	border-radius: 50%;
	margin-right: 10upx;
}
.index-list1 > view:last-child {
	padding: 0 10upx;
}
.index-list2 {
	line-height: 80upx;
	font-size: 32upx;
}
.index-list3 {
	position: relative;
}
.index-list3 image {
	width: 100%;
	border-radius: 20upx;
}
.index-list4 {
	justify-content: space-between;
	color: #989898;
	align-items: center;
}
.index-list4 > view > view {
	line-height: 55upx;
	display: flex;
}
.index-list4 > view > view {
	margin-left: 25upx;
}
.index-list-play {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -120upx;
	margin-left: -70upx;
	color: #ffffff;
	font-size: 140upx;
}
.index-list-playinfo {
	position: absolute;
	background-color: rgba(51, 51, 51, 0.7);
	color: #ffffff;
	bottom: 8upx;
	right: 8upx;
	border-radius: 40upx;
	padding: 0 12upx;
}
.index-list4 .active,.index-list4 .active>view{
	color: #C5F61C;
}
</style>
